<template>
  <div class="annual-refinement-management">
    <!-- 第一行：标题和导出按钮 -->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="12">
        <h3>年报精细化管理</h3>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <!-- 第二行：Tab切换组件 -->
    <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
      <el-tab-pane label="市场主体年报精细化管理" name="marketEntity"></el-tab-pane>
      <el-tab-pane label="企业年报精细化管理" name="enterprise"></el-tab-pane>
      <el-tab-pane label="年报分类管理类型" name="classification"></el-tab-pane>
    </el-tabs>

    <!-- 主体内容区域 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <!-- 左侧表格 -->
        <div v-if="activeTab === 'marketEntity'" class="table-container">
          <el-table :data="marketEntityData" style="width: 100%" border v-loading="loading">
            <el-table-column prop="name" label="年报主动性类型" width="180"></el-table-column>
            <el-table-column prop="yingbs" label="应报数" width="120"></el-table-column>
            <el-table-column prop="yibs" label="已报数" width="120"></el-table-column>
            <el-table-column prop="wbs" label="未报数" width="120"></el-table-column>
            <el-table-column prop="bsv" label="报送率" width="120"></el-table-column>
          </el-table>
        </div>

        <div v-if="activeTab === 'enterprise'" class="table-container">
          <el-table :data="enterpriseData" style="width: 100%" border v-loading="loading">
            <el-table-column prop="name" label="年报主动性类型" width="180"></el-table-column>
            <el-table-column prop="yingbs" label="应报数" width="120"></el-table-column>
            <el-table-column prop="yibs" label="已报数" width="120"></el-table-column>
            <el-table-column prop="wbs" label="未报数" width="120"></el-table-column>
            <el-table-column prop="bsv" label="报送率" width="120"></el-table-column>
          </el-table>
        </div>

        <div v-if="activeTab === 'classification'" class="table-container">
          <el-table :data="classificationData" style="width: 100%" border v-loading="loading">
            <el-table-column prop="name" label="市场主体类型" width="180"></el-table-column>
            <el-table-column prop="yingbs" label="应报数" width="120"></el-table-column>
            <el-table-column prop="yibs" label="已报数" width="120"></el-table-column>
            <el-table-column prop="wbs" label="未报数" width="120"></el-table-column>
            <el-table-column prop="bsv" label="报送率" width="120"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- 右侧内容 -->
        <div class="right-content">
          <!-- 企业年报进度 -->
          <div id="progressChart" style="width: 100%; height: 300px;"></div>
          <!-- 各行业企业年报报送情况分布 -->
          <div id="industryDistributionChart" style="width: 100%; height: 300px;"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 底部各县区企业年报情况跟踪 -->
    <div class="county-tracking">
      <h4>各县区企业年报情况跟踪</h4>
      <div id="countyTrackingChart" style="width: 100%; height: 400px;"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
  import { getMarketEntityData, getEnterpriseData, getClassificationData, getEnterpriseProgress, getCountyTrackingData, getIndustryDistributionData } from '@/api/annual-report'

  const activeTab = ref('marketEntity')
  const loading = ref(false)

  // 市场主体年报精细化管理数据
  const marketEntityData = ref([])

  // 企业年报精细化管理数据
  const enterpriseData = ref([])

  // 年报分类管理类型数据
  const classificationData = ref([])

  // 企业年报进度数据
  const enterpriseProgressData = ref({})

  // 各县区企业年报情况跟踪数据
  const countyTrackingData = ref([])

  // 各行业企业年报报送情况分布数据
  const industryDistributionData = ref([])

  // 处理Tab切换
  const handleTabChange = (tabName) => {
    fetchData(tabName)
  }

  // 获取数据
  const fetchData = async (tabName) => {
    loading.value = true
    try {
      switch (tabName) {
        case 'marketEntity':
          const marketRes = await getMarketEntityData({ "code": "hasj_dnnbfl" })
          if (marketRes.code === 200 && marketRes.data && marketRes.data.code === 200) {
            marketEntityData.value = marketRes.data.data
          }
          break
        case 'enterprise':
          const enterpriseRes = await getEnterpriseData({})
          if (enterpriseRes.code === 200 && enterpriseRes.data && enterpriseRes.data.code === 200) {
            enterpriseData.value = enterpriseRes.data.data
          }
          break
        case 'classification':
          const classificationRes = await getClassificationData({})
          if (classificationRes.code === 200 && classificationRes.data && classificationRes.data.code === 200) {
            classificationData.value = classificationRes.data.data
          }
          break
      }
      // 获取企业年报进度数据
      const progressRes = await getEnterpriseProgress({})
      if (progressRes.code === 200 && progressRes.data && progressRes.data.code === 200) {
        enterpriseProgressData.value = progressRes.data.data
        initProgressChart()
      }
      // 获取各县区企业年报情况跟踪数据
      const countyRes = await getCountyTrackingData({})
      if (countyRes.code === 200 && countyRes.data && countyRes.data.code === 200) {
        countyTrackingData.value = countyRes.data.data
        initCountyTrackingChart()
      }
      // 获取各行业企业年报报送情况分布数据
      const industryRes = await getIndustryDistributionData({})
      if (industryRes.code === 200 && industryRes.data && industryRes.data.code === 200) {
        industryDistributionData.value = industryRes.data.data
        initIndustryDistributionChart()
      }
    } catch (error) {
      console.error('获取数据失败:', error)
    } finally {
      loading.value = false
    }
  }

  // 初始化加载数据
  onMounted(() => {
    fetchData(activeTab.value)
  })

  // 导出功能
  const handleExport = () => {
    // 实现导出功能
    console.log('导出数据')
  }

  // 初始化企业年报进度图表
  const initProgressChart = () => {
    const chartDom = document.getElementById('progressChart')
    const myChart = echarts.init(chartDom)
    const option = {
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 100,
          splitNumber: 5,
          axisLine: {
            lineStyle: {
              width: 30,
              color: [[0.5, '#67C23A'], [0.8, '#E6A23C'], [1, '#F56C6C']]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          axisLabel: {
            color: 'auto',
            distance: -35
          },
          splitLine: {
            distance: -20,
            length: 30,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          detail: {
            formatter: '{value}%',
            fontSize: 30,
            offsetCenter: [0, '50%']
          },
          data: [{ value: enterpriseProgressData.value.progress }]
        }
      ]
    }
    myChart.setOption(option)
  }

  // 初始化各县区企业年报情况跟踪图表
  const initCountyTrackingChart = () => {
    const chartDom = document.getElementById('countyTrackingChart')
    const myChart = echarts.init(chartDom)
    const option = {
      xAxis: {
        type: 'category',
        data: countyTrackingData.value.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: countyTrackingData.value.map(item => item.value),
          type: 'bar'
        }
      ]
    }
    myChart.setOption(option)
  }

  // 初始化各行业企业年报报送情况分布图表
  const initIndustryDistributionChart = () => {
    const chartDom = document.getElementById('industryDistributionChart')
    const myChart = echarts.init(chartDom)
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['异常逾期类', '主动申报类']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: industryDistributionData.value.map(item => item.name)
      },
      series: [
        {
          name: '异常逾期类',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: industryDistributionData.value.map(item => item.abnormalValue)
        },
        {
          name: '主动申报类',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: industryDistributionData.value.map(item => item.activeValue)
        }
      ]
    }
    myChart.setOption(option)
  }
</script>

<style scoped>
  .annual-refinement-management {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
  }

  .right-content {
    margin-top: 20px;
  }

  .county-tracking {
    margin-top: 20px;
  }
</style>